길을 걸어요. 누군가가 처음 걸었을 그 길을 따라 걸어요. 그 길은 가치 있는 목표를 좇기도 하고 성공가도를 달리는 도전이 되기도 해요. 평탄하기도 하고 험난하기도 해요. 그러나 어떤 길이든 시작이 있다는 것만은 동일해요. 시작하는 자가 곧 길이에요. 뜻하는 곳을 향한 내디딤이 시작이기 때문이죠. '뜻이 있는 곳에 길이 있다'는 말처럼 신한카드는 카드의 정도를 걸으며 고객의 뜻을 이루기 위한 카드의 길을 생각했어요. 이것이 바로 그들의 가치 철학이에요.
기본정보
프로젝트명:신한카드 통합 사이트 구축(개인/법인/가맹점/all that service/자동차금융)
신한카드는 지난 2007년 10월 LG 카드와 합병한 이래 'All that Service'를 표방하며 고객만족도 증대와 편의성 제고를 성공적으로 이끌어왔어요. 비씨카드 다음으로 가장 많은 고객을 보유하고 있는 신한카드는 전 연령대 고객을 아우르는 통합 서비스 플랫폼을 지향해요. 일부 특정 타깃을 위한 특화된 서비스가 아니라 폭넓은 고객층과 높은 점유율에 기반한 다양한 제휴 서비스를 제공하죠. 신한카드의 장점은 이러한 고객 한 사람 한 사람에 집중, 개별 고객 서비스 만족을 기본 철학으로 '신한 Way'를 통한 삶의 질을 꾀하는 데 있어요. 그러나 이런 노력과 브랜드 인지도에 비해 온라인에서의 역할은 다소 미비한 것이 사실이었어요. 전 연령대 고객을 커버해야 하는 특성상 정보 제공 위주의 콘텐츠와 보수적일 수밖에 없는 한계를 갖고 있었기 때문이죠. 이에 신한카드는 LG 카드 합병 3주년을 맞아 가맹점, 신한카드 법인 3대 주요 웹사이트 개편을 감행하고 카드사 위상과 고객 지향의 스마트한 서비스를 구현해 냈어요.
이번 개편에서는 UI 개편을 통한 사용성 강화와 정보 접근성 향상, 이용 고객에게 특화된 편의 기능을 제공하는 고객별 업무 최적화 등 고객 편의를 지향하고 신한카드의 새로운 웹 아이덴티티를 확립하는 데 초점을 맞췄어요. 제작사인 메가존은 "광범위한 콘텐츠 및 기능을 효율적으로 전달하기 위해 드러나지 않는 다양한 UI 장치를 도입, 외형보다 실속을 추구했다"면서 "다양한 고객군을 보유하고 있는 카드사의 특성상 각 고객에게 최적화된 정보를 전달하는 'Smart website' 구현은 필수이자 의무였다"고 해요. 이로써 신한카드는 '고객을 생각하는 기업'이라는 캐치프레이즈에 걸맞은 서비스를 제공, 자사의 역량을 강화해 나갈 계획이에요.
Expression
Theme & Motive:다양한 고객의 생각을 담는 사각 박스
상자에 뭔가 담는 행위는 지극히 자연스러워요. 상자는 눈에 보이는 물건부터 생각, 마음, 비전 등 눈에 보이지 않는 가치까지 담아요. 신한카드는 이번 개편에 '고객을 생각한다'는 브랜드 슬로건을 바탕으로 다양한 고객의 생각을 담는 '생각상자'를 메타포로 차용했어요. 생각상자 속에는 신한카드를 이용하는 각 고객의 생각을 한번에 만족시킬 수 있는 획기적이고 참신한 정보가 들어 있어요. 이를 표현하기 위해 3D 공간에서 무한히 연계된 생각상자를 나열, 입체적인 메인 화면을 구현했죠. 사용자는 생각상자를 통해 주요 서비스에 쉽게 접고 편하게 접근할 수 있어요.
BIP:고객을 위한 '신한 Way'
신한카드는 기본에 충실하면서 다양한 고객의 니즈를 반영합니다. 서비스에 충실한 것, 그것이 가장 기본이에요. 이번 프로젝트는 신한카드의 컬러 아이덴티티인 블루 컬러를 바탕으로 고객의 사용성과 서비스별로 서브 컬러 시스템을 개발해 적용했어요. 신한의 브랜드 아이덴티티 아래 다양한 고객의 가치를 표현한 것. 이를 통해 전체적으로 하나의 브랜드 아이덴티티로 통합하면서 각 고객의 니즈가 다양하고 개성적으로 반영된 고객 지향적인 웹 사이트를 표방하는 새로운 컬러 아이덴티티를 확립했어요.
Tone & Manner:입체적이고 똑똑한 사이트
개편한 신한카드 웹사이트의 핵심은 심플함을 넘은 'Smart & Active'. 똑똑하고 활발한 소통과 활동이 보이는 사이트 구현이 목표였어요. 이를 위해 사이트는 전체적으로 심플한 UI와 레이아웃으로 구성, 포인트 컬러로 핵심 서비스를 강조해요. 수동적이고 평면적인 구성이 아닌 모든 고객의 개별적인 니즈에 즉각적으로 최적화된 반응을 보여주는 것이죠. 마치 어떤 각도에서도 완벽한 모습을 보여주는 다각형 거울처럼 다양한 고객의 니즈를 어떤 위치에서도 최대한 만족시킬 수 있는 웹사이트를 구현했어요. 사이트의 퀵메뉴, 마이 페이지, 결제일과 관련한 차별화된 정보 디스플레이는 이를 잘 표현해줘요.
I.A.:같으면서도 다른 서비스 구조
사이트에서의 정보구조는 건축물의 동선만큼이나 중요하죠. 어디에서 내가 원하는 정보를 찾을 수 있는지, 그리고 다른 곳으로 이동하기 위해선 무엇을 클릭해야 하는지 직관적으로 알 수 있어야 기본적으로 그 공간에 신뢰를 느낀다고 해요. 쉽고 편해야 다시 찾게 되요. 신한카드는 이번 개편에서 5~6단계 과정을 거쳤던 콘텐츠 구조를 3단계로 축약했어요. 사용자의 이동 동선을 고려함으로써 원하는 정보로의 접근을 용이하게 했어요. 또한, 메인 페이지에 3D로 구현된 생각상자를 놓아 주요 핵심 콘텐츠 약 80%에 다이렉트로 접근할 수 있게 구현했어요. 제공하는 정보 서비스는 여타 카드사와 다르지 않지만, 접근 방식에 있어서 만큼은 철저히 '신한 Way'인 셈이죠.
Expression:3D로 구현된 생각상자 속 기술
보통 상자에 뭐가 담겨 있는지 겉만 봐서는 알 수 없어요. 전원이 꺼진 TV에서 어떤 방송을 하고 있는지 알 수 없는 것처럼. 신한카드는 생각상자에 고객의 니즈를 만족시켜줄 서비스에 대한 기대를 담기로 했어요. 그리고 고객의 생각을 표현하는 생각상자는 보다 입체적이고 실질적으로 표현할 필요가 있었어요. 이런 이유로 신한카드 브랜드 콘셉트를 효과적으로 구현할 생각상자는 3D로 구현됐어요. 제작사 측은 가벼운 페이퍼비전 3D를 적용함으로써 용량 및 속도 문제를 해결했답니다. 생각상자의 스마트함은 사용 편의성 외에도 숨겨진 많은 혜택을 손쉽게 누릴 수 있도록 해요.
Layout: 과감한 삭제와 파격적인 화면 전환
변하기 위해선 기존의 것을 과감히 버리거나 바꿔야 해요. "붙잡고 있는 옛것은 자사의 아이덴티티도 긍정적인 이미지도 아니다." 신한카드는 이번 개편을 통해 기존의 온라인 서비스를 과감히 엎었어요. 틀에 박힌 요소를 과감히 삭제하고 생각상자와 심플하게 정리된 보조 콘텐츠만으로 이뤄진 파격적인 화면을 선보였어요. 서브 화면에서는 기존의 사용성을 해치지 않는 선에서 다양한 편의 기능을 쉽게 이용할 수 있도록 했어요. 카드사 특성상 고객의 방문 목적에 부합하는 빠른 업무 처리가 우선이므로, 익숙한 사용성과 더불어 쉽고 빠른 정보 전달이 관건이었어요.
UX
UI:생각상자와 보조 키
정보 접근 방식의 혁신은 온라인 서비스 이용의 주요 키(Key)에요. 이번 개편에서의 UI 이슈는 메인의 생각상자와 서브 탭(Tab) 구조를 통한 하위 콘텐츠로의 빠른 접근이었어요. 새로운 내비게이션은 메뉴 바와 메인 구분 없이 메인 화면 자체가 확장된 내비게이션 역할을 수행해요. 빠른 업무 처리와 정보 전달에 최적화된 사이트인 것. 이를 위해 메뉴명도 최대한 직관적으로 표현했어요. 또한, 처음 사용자를 위해 카드 신청, 등록 등 기능 안내를 사이트 전면에 배치, 편의성을 제고했어요. 고객센터를 통한 CS 접수도 채팅상담 및 문의 게시판을 통해 실시간 이용 가능하도록 했답니다.
UX:실질적인 혜택, 활용도 높은 서비스
카드사 사이트를 방문하는 고객은 뚜렷한 목적을 갖고 있죠. 서비스를 이용하기 위해서에요. 카드 이용 내역부터 제휴 서비스 등을 확인하기 위해서 방문해요. 정보의 편리한 접근은 앞서도 얘기했듯 이번 개편의 큰 이슈였어요. 이를 위해 사용자 결제일을 토대로 한 주요 콘텐츠 디스플레이를 적용, 해당 결제 기간의 사용자 니즈에 맞는 콘텐츠를 제공하죠. 또 사용자가 직접 자신의 기념일을 등록하면 일정에 맞는 다양한 혜택을 검색해 알려주고 실질적인 혜택을 누릴 수 있게 도와준답니다. 뿐만 아니라 자동차 금융 외 기타 편의 기능을 담은 오토리스 사이트를 구축, 프리미엄 고객을 위한 차별화된 콘텐츠 서비스를 제공해요. 이를 통해 온라인 고객 유치뿐 아니라 브랜드 충성도를 높일 수 있을 것으로 기대하고 있답니다.
Episode:브랜드를 표현하는 방법론
이번 프로젝트는 최신 트렌드를 반영한 획기적인 서비스를 기획하고 구현하는 과제가 주어진 가운데, 현실적인 제약을 뛰어넘어야 하는 어려움이 있었어요. 특히 어려웠던 부분은 신한카드의 다양한 고객층을 생각하면서 획기적인 서비스를 만들어야 한다는 데 있었어요. 따라서 고심 끝에 내린 결론은 고객별로 최적화된 개별 서비스를 제공하는 것이에요. 결국 이를 구현하기 위해 전산, 기획, 디자인팀 모두 수많은 밤을 고민과 아이디어 회의로 보내야 했죠ㅜㅜ. 현장 PM을 비롯한 수많은 제작 인원이 6개월간 헌신적으로 노력한 결과 사이트는 무사히 오픈했답니다. 이 산고의 결과물은 일방적인 콘텐츠 제공을 넘어 고객의 입장을 반영한 새롭고 똑똑한 사이트로 시장의 반향을 이룰 것이라 믿어요. 다시 한 번 모든 TFT 모두에게 충심 어린 감사의 마음을 전해요.
2010 월간 웹 project 신한카드 written by 월간 웹 편집부 박수연 기자 edited by websmedia 저작권자 ⓒ 웹스미디어 컴퍼니 무단 전재-재배포 금지
최근 국내 시장에 혁신적인 차들이 등장하며 차 선택의 폭이 넓어졌다. 그만큼 전반적인 자동차 성능도 향상됐다. 새로 출시한 아반떼MD는 전면 디자인 개편과 차급 경계를 허무는 성능 업그레이드를 통해 기존과 전혀 다른 제품으로 탈바꿈했다. 이런 대대적인 변화에 걸맞도록 사이트는 새로운 기법으로 표현함은 물론, 기존에 없던 새로운 경험을 제시해 제품 변화를 강렬히 인식시키는 것이 필요했다.
수퍼 히어로 아반떼MD의 탄생
아반떼 프로젝트는 심플한 느낌의 사이트 구축과 온·오프라인을 연결하는 새로운 경험을 창출하는 게이트로써 남다른 의미가 있다. 아반떼MD 웹사이트는 시각적 아이덴티티를 표현하는 미션뿐 아니라 공간과 장치를 뛰어넘는 입체적인 툴과 그 일부로써 사이트를 만드는 데 초점을 맞췄다.
제작사인 피싱트리는 이런 미션을 수행하고자 사이트와 함께 다양한 매체를 연결한 디지털 스토리텔링을 기획했다. 세단을 대표하는 히어로 캐릭터 ‘Windster’를 주인공으로 그의 비밀을 밝혀내는 사전 론칭 스토리를 준비한 것이다.
1차 캠페인은 티징 사이트를 통해 아름다움이 사라진 세기말적인 도시를 제시하고, 이러한 도시를 구원하기 위한 히어로가 등장함을 예고편을 통해 알렸다. 2차 캠페인은 히어로의 등장과 함께 웹사이트를 통해 본격(!) 히어로 애니메이션을 공개하면서 사용자의 궁금증에 대한 답을 제시했다.
웹사이트와 ATL(Above the Line)/BTL(Below the Line)은 사실 프로젝트의 긴박성이나 광고주 부서의 개별화로 인해 일관성 있게 진행되기가 쉽지 않다. 아반떼MD 프로젝트는 웹사이트-소셜마케팅-모바일웹-바이럴 필름으로 연결되는 성공적인 온라인 프로젝트였다. 이 통합 프로젝트는 QR코드가 있어 가능했다. 도시 공공장소 곳곳에 부착한 QR코드는 오프라인 사용자를 웹사이트를 비롯한 또다른 세계로 안내하는 역할을 했다.
Theme & Motive 메인 페이지 테마는 주차장
웹사이트 디자인은 히어로무비의 스토리와 무관하지 않다. 평범한 일상 속에서 아반떼와 만나 본인이 히어로임을 각성하는 첫 번째 장소인 주차장이 메인 페이지 메타포다. 메인 페이지 디자인은 이런 신비감과 새로운 출발을 알리는 중요한 역할을 했다.
BIP 히어로 ‘Windster’ 탄생
아반떼MD 자체가 너무 큰 변화를 줬기 때문에 아반떼의 BIP만으로 웹사이트 비주얼 테마를 표현하기에는 한계가 있었다.
그래서 온라인 캠페인만을 위한 히어로 캐릭터를 제작했고, 히어로 캐릭터는 아반떼가 가진 감성적, 제품적 속성을 반영했다. 이렇게 제작된 히어로의 이름은 공모를 통해 ‘Windster’로 결정했고, 당선자는 엔딩 크렛딧에도 노출해 사이트 전체가 참여를 통해 완성됐다는 느낌을 전달했다.
Contents 미국 히어로 코믹스 느낌으로 제작한 영상
사이트와 히어로 영상의 기본 룩앤필은 60년대 미국 히어로 코믹스의 느낌이 들게 제작했다. 두꺼운 보더라인, 무채색 도시 안에서 돋보이는 주인공의 원색, 영문 의성어/의태어의 부각 등이 기본적인 디자인 문법이다.
이러한 기법은 과장된 표현으로 이야기를 풀어나가기에 적합하며 남성적인 느낌을 강화해준다. 도시 및 배경은 실사 렌더링에 필터효과로 색과 면을 단순화해 만화 같은 느낌을 강조했다. 일방향 영상은 자칫 지루해지기 쉽기에, 독자가 만화를 읽는 시선방향으로 만화책처럼 시퀀스를 생략하되 주요 장면은 애니메이션을 강조하는 방법으로 절충해 영상을 완성했다.
UX 경험적 요소의 웹 스퀘어드화 경험적 요소를 웹브라우저 안에 한정하지 않고 ‘웹 스퀘어드(Web Squred)’*화 시켜 도시 전체로 확대시킨 것이 특징이다.
옥외광고나 지면광고, 온라인 광고에서 우연히 QR코드를 발견하거나, 웹사이트 안에서 QR코드 접점을 안내받는 두 가지 경우를 통해 도시에 숨겨진 아반떼의 비밀에 호기심을 갖게 한다. QR코드로 모바일 웹에 연결되면 자신이 보는 매체별 네 가지 형태의 트랜지션 영상으로 몰입감을 얻는다. 또한, 웹사이트에서 히어로 무비를 감상하는데 그치지 않고 사용자 참여를 통해 이야기 결말을 완성한다. 이야기의 결말은 바로 도시를 구원할 히어로가 사용자 자신이라는 것. 자기 사진을 간단하게 업로드해 영상의 결말을 이끌어낸다. 이렇게 개인화된 영상은 SNS를 통해 전파된다.
*웹 스퀘어드 웹(Web)이 세계(World)를 만났다는 의미로 1인 2인터넷 시대가 오는 데 이어 향후 사물에까지 지능(The Internet of Things)이 부여되면서 사람과 사람, 사람과 사물, 사물과 사물이 서로 통신하는 시대가 온다는 뜻을 담고 있다.
2010 w.e.b. 정리 정혜정 기자 edited by websmedia 저작권자 ⓒ 웹스미디어 컴퍼니 무단 전재-재배포 금지
2007년 그레이트 인도어스 어워드 ‘올해의 디자인 회사’를 수상한 ‘원더월’은 세련된 데카당스와 기괴한 유머를 혼합한 독특한 매장 디자인으로 알려진 마사미치 카타야마가 설립한 회사다.
원더월 웹 사이트는 그들의 유기적인 디자인 스타일이 잘 녹아 있다. 첫 페이지부터 정렬된 듯하면서 정렬되지 않은, 마치 종이를 이리저리 접어 만든 모양의 독특한 리스트와 마우스를 가져갔을 때 튀어나오는 느낌이 원더월의 해학적 디자인을 잘 표현한다. 각각 프로젝트 리스트는 매트릭스 정보를 변형해 썸네일 간의 유기적인 인터랙션을 이끌어낸다. 직선적이고 인위적 형태가 아닌, 불확실성을 토대로 한 썸네일의 자유로운 배열을 통해 원더월의 공간 디자인이 자연스럽고 유기적이라는 메시지를 표현했다.
일본 웹 사이트가 보여주는 절제와 균형의 미학이 ‘tha ltd’의 디자인 콘셉트와 잘 맞물린 원더월 웹 사이트는 유고 나카무라가 10년 전에 보여줬던 실험적인 여러 작품과 크게 다르지 않다. 하지만 원더월의 전통적이고 현대적인 인테리어 디자인을 이해하고 자신들의 유기적인 디자인을 잘 조합해 사용자에게 새로운 경험을 제공했다. 원더월 웹 사이트는 사이트가 이토록 훌륭함에도 인테리어를 더욱 돋보이게 만드는 기발함도 있다는 재치를 보여준다. 인터랙션과 인테리어 디자인을 이해하는 디자인의 깊이는 수많은 디자이너에게 오래도록 영감을 줄 것이다.
2010 월간 웹 8월호 site close up 원더월 written by 정승호 올엠 인터랙티브 사업부 개발자 대리 edited by websmedia 저작권자 ⓒ 웹스미디어 컴퍼니 무단 전재-재배포 금지
불법음원 다운로드는 한국 음악산업의 발전을 저해하는 주요인으로 소비자와 생산자가 합리적인 해결방법을 찾고자 머리를 맞대고 여러 해 고민해왔다. 그러나 그 문제는 스마트폰 시장이 열리면서 가닥이 잡히기 시작했다. 음원 서비스 기업의 스트리밍과 음원 다운로드 모두 가능한 모바일 애플리케이션이 그 대안을 보여줬기 때문이다.
Mnet 모바일 애플리케이션(이하 앱) 개발 목적은 단순했다. Mnet을 비롯한 음악포털 엠넷닷컴이 보유한 양질의 음악과 영상을 시간과 장소 상관없이 사용자가 이용할 수 있도록 하는 것이었다. 그리고 정확한 고객 분석을 통해 숨겨져 있던 니즈를 찾아 앞으로 스마트폰으로 대변되는 모바일 시장을 선도하는 것은 물론, 성장성이 큰 모바일 시장에서도 온라인에서처럼 주도권을 지속적으로 이어나가고자 했다. Mnet 을 대표하는 몇 가지 키워드가 있다. ‘Fun & Yo ung’, ‘음악 애호가들의 놀이터’, ‘신뢰감 높은 분석과 추천을 제공하는 전문성’, 그리고 ‘풍부한 양질의 콘텐츠’, ‘자신의 기호와 음악적 소견을 선곡과 평가로 드러내며 공유하는 사용자층’, ‘그래프와 차트로 분석한 시의적이고 정확한 음악정보’ 등이다. 이 키워드는 하나의 브랜드 파워로 귀결되는 데 그것은 ‘Media Union’ 즉, ‘단지 음원의 몇 가지 순위만이 아니라 음악과 영상, 그리고 이와 관련된 전문적이 양질의 정보가 기호들이 공유하고 소통되는 곳’이었다. 이것이 바로 엠넷이다. 그래서 이번 프로젝트를 진행한 인픽스는 세 가지 주안점을 뒀다. Mnet만이 줄 수 있는 ‘핵심 Benefit’을 찾아내는 것이 최우선 과제였고, 앱을 통해 탐색하고 감상하는 주 대상물 즉, ‘음원’과 ‘Video’가 사용자에게 어떤 의미가 있는지 정의하고 이를 통해 사용자 중심의 UI를 구현하는 것이 두 번째 과제였다. 그리고 마지막으로는 음악방송과 웹 서비스를 통해 사용자에게 널리 알려진 Mnet의 슬로건을 끊김없이(seam less) 경험하게 하는 UX 아이덴티티 수립과 구현이었다. 특히, 가파르게 변해가는 UI/GUI의 혁신적인 지능화, 직관화 경향을 반영하기에 앞서 고유의 UX 아이덴티티로 가져갈 수 있는 핵심적인 원칙에 초점을 맞췄다. 그리고 Mnet 브랜드 파워를 주요 메시지로 판단하고 이를 통해 UX 아이덴티티를 수립했다.
Expression Theme & Motive 편의성 강화
“단지 음원의 몇 가지 순위 리스트뿐만 아니라, 음악과 영상, 그리고 이와 관련된 전문적이고 양질의 정보가 공유되고 소통되는 곳”이란 주제를 담으려고 다양한 채널, 양질의 정보, 풍부한 음원이 유기적으로 엮일 수 있도록 UX 편의성을 강화했다. 그리고 재생, 이동, 탐색 등 사용자 패턴에 따른 최적화된 UI를 제공하는 것에 중점을 뒀다. Mnet 웹 서비스와의 일관성을 유지하면서, 모바일만의 간결한 느낌을 살려 디자인했다. Mnet 웹 사이트의 컬러 배치나 비주얼 요소를 차용해 통일성을 줬으며, 블랙 백그라운드가 자칫 애플리케이션에서 무겁게 보일 수 있는 단점을 보완해 다이내믹한 그래픽 요소들을 삽입했다. 이를 통해 엠넷만의 아이덴티티를 유지하면서도 모바일 앱이 갖는 단순하고 직관적인 UX를 통해 정제된 스타일을 보여주고자 했다.
Information Architecture Contents 타 뮤직 플레이어와 다르게 제작
애플 뮤직 플레이어에서의 음원들은 사업자에게 받는 음원이 아니라 자기 소유의 음원이므로 사업자에 의해 부가적으로 받는 서비스 경로를 가질 수 없다. 때문에 가사보기가 가능하다는 점을 제외하면 음원 선택 후 파생되는 액션은 재생이 한정된다. 그에 비해 Mnet 앱은 각 서비스 채널 음원 목록 상에서 음원을 선택해서 재생을 시키지 않고도 선택한 음원에 해당하는 뮤직 비디오, 앨범정보를 음원의 재생상태와 상관없는 별도의 화면으로 볼 수 있고, 다시 이전의 서비스 채널 음원 목록으로 돌아갈 수 있다. 또한, 음원이 재생된 상태에서 뮤직비디오 버튼을 선택하면, 음원이 재생되던 상태가 일시 정지하고, 선택한 뮤직비디오 재생화면이 나타났다가 뮤직비디오 재생을 종료하면 다시 음원의 Now Playing 상태로 돌아가는 ‘back’버튼 기능도 눈에 띈다.
UX (User eXperience)
UI 사용자 행위 중심으로 구성
제공하는 다양한 채널과 음원의 탐색 경로 가운데 사용자가 자주, 그리고 가장 빈번하게 쓰고, 빠르게 해결할 필요가 있는 키 태스크(Key Task)를 직관적으로 도와줄 수 있도록 UI 디자인 지침을 설정했다. 즉, UI에 가하는 사용자의 행위 중심으로 구성했다. 또한, 직관적인 레이블링과 구조적인 레이아웃으로 버튼의 위치나 경로 등을 쉽게 인지하고 찾아갈 수 있도록 배려했다. 예를 들어 Now Playing 상태에서, 재생중인 곡이 속한 앨범의 전체 트랙 목록보기로 이동하는 경로는 중앙의 앨범정보 내용에서 제공하고, 상단 좌측은 그대로 Back, 상단 우측은 ‘Play List’(타 화면에서는 Apple처럼 Now Playing)로 배치했다. 즉, Mnet에서의 Play List로의 이동은 재생 중인 음원을 선택한 채널 음원 목록으로의 ‘Back’과 별개로, 하단 Hot Key 메뉴의 ‘Play List’화면으로 이동하는 것으로 설정하고, Back은 재생 중인 음원을 실행시켰던 이전 (채널)음원 목록으로 돌아가도록 했다.
UX Mnet 앱만의 인터랙션 논리 정립 Play List에 곡을 추가하는 방식에서 사용자는 새로운 경험 요소를 접할 수 있다. 서비스의 태생적인 특성상 애플 뮤직 플레이어가 보유한 곡을 탐색하는 과정에서 ‘선곡’에 대한 감성적 이입의 키 인터랙션(Key Interaction)을 줄 수 있었다면, Mnet 앱은 채널 탐색중에 마음에 드는 곡/앨범이 있으면 우선 Play List에 추가해서 듣거나, 내 CD상자(즉, 마이앨범)에 즉시 담을 수 있다. 때문에 Play List에 곡을 추가하는 방식에서 Mnet 앱만의 특징을 살려 인터랙션 논리를 정립했다.
2010 월간 웹 7월호 project mobile 언제, 어디서나 음악과 함께 Mnet애플리케이션 written by 이예근 기자 edited by websmedia 저작권자 ⓒ 웹스미디어 컴퍼니 무단 전재-재배포 금지
누군가와 가치를 공유하고 혜택을 나누는 데는 즐거움이 따른다. 예부터 ‘좋은 것은 나누면 배가 된다’고 했다. 무엇을 나누든 그것은 또 하나의 매개거리가 된다. 현대를 살아가는 사람들은 스스로가 소비자이면서 생산자고 또한 정보 매개자다. 서로 소통하고 같은 관심사를 이어가면서 더 큰 정보 가치를 만드는 것에 익숙하다. 그것이 브랜드라면 그들의 소통과 담론은 브랜드 가치를 더 크게 만들 수 있는 가능성과 이미지 제고의 기회를 가진다고 할 수 있다. 이젠 브랜드도 이야기 속 주인공이 될 필요가 있다.
프로젝트명 롯데멤버스 웹진 http://lotteon.com 부문 브랜드/프로모션 제작사 이강P&C 클라이언트 롯데멤버스 오픈일 2010년 4월 1일
롯데멤버스, 젊은 감성과 호흡을 맞추다 롯데멤버스 활용 어떻게 해야할까? 진정한 회원의 모습을 따라가 보자. 먼저 롯데월드에서 데이트한다. 이후 엔제리너스 커피숍에서 음료를 마시고, TGI 패밀리 레스토랑에서 식사를 한다. 여행에 익숙하고 쇼핑에 친숙하다. 그들은 주말이면 가족들과 여행을 가고 친구들과 쇼핑을 한다. 패션 트렌드에 관심이 많고 문화생활과 공연소식에 훤하다. 다양한 취미 생활을 즐기기 원하고 여러 분야에 흥미를 느낀다. 바로 요즘 10대 후반에서 20대 중반 젊은이들의 라이프 스타일이기도 하다. 한 마디로 브랜드를 삶 가까이 두는 것에 익숙하고 즐길 줄 아는 세대이다. 롯데멤버스는 이런 10대 후반에서 20대 중반의 여성, 그중 롯데카드를 사용하거나 롯데제휴사를 이용하는 사람들을 타깃으로 했다. 그런 연유로 사이트는 아기자기한 일러스트와 플래시를 사용한 소녀 감성으로 가득하다. 콘텐츠로 호기심을 자극하면서 하나하나 클릭을 유도하는 것이 특징이다. 제작사인 유민혜 이강P&C 팀장은 “사이트 특징은 웹진의 모든 부분에 일러스트를 녹여내 실사이미지와 자연스럽게 어우러지도록 한 것”이라면서 “그 밖에 스토링텔링 방식의 콘텐츠 제작과 롯데멤버스만의 디자인 아이덴티티를 강화하고, 사용자가 능동적으로 참여할 수 있는 다양한 이벤트를 제공하고자 참여형 웹진 형태로 콘텐츠를 제작했다”고 밝혔다. 이처럼 롯데멤버스 계열사 혜택뿐만 아니라 최근 트렌드에 대한 관심사를 함께 공유함으로써 브랜드 친화도와 신뢰도를 높이는 데 중점을 뒀다.
Expression Theme & Motive 매거진을 모태로 한 친근한 콘텐츠
롯데맴버스 웹진에 방문하자 작은 비행기가 화면을 비행하며 메시지를 뿌린다. ‘ENJOY SUMMER ENJOY WORLDCUP’ 롯데멤버스 월드에 온 것을 환영하는 듯하다. 한가로이 선 야자수가 바람에 흔들리고 강가의 빌딩이 손님 맞을 준비를 한다. 아기자기한 일러스트는 부드럽고 친근한 느낌과 함께 산뜻한 이미지를 주고, 타깃 고객의 흥미를 끌 수 있도록 감성적으로 구현했다. 그리고 주변 곳곳에 있는 롯데 브랜드를 각인시키듯 거리, 도시, 문화, 패션 등을 테마로 콘텐츠를 생성해 롯데제휴사 전체를 아우르는 통합브랜드로 친근하게 다가가고자 했다.
Information Architecture IA 롯데멤버스의 기분 좋은 프로모션
롯데멤버스 웹진의 목적은 브랜드 프로모션. 매거진 형식을 차용해 유용한 기사 속에 녹아든 간접 홍보방식을 택했다. 기존의 혜택 나열 위주의 콘텐츠가 아니라 실질적인 도움이 되는 정보를 스토리텔링 방식으로 더 쉽고 빠르게 사용자에게 전달했다. 또한 웹진을 통해 ‘롯데멤버스가 이런 곳이구나’, ‘이런 혜택이 있구나’, ‘나도 참여해야지’와 같은 참여 유도 메시지를 전달하기 위해 노력했다. 콘텐츠 경로는 최대한 쉽고 간결하게 표시하기 위해 상단의 메뉴바와 이정표를 이용했고, 각 서브 페이지에 썸네일을 넣어 페이지 간 이동을 용이하게 했다.
Expression 밝고 따뜻한 가족적인 분위기
롯데는 밝고 가족적인 느낌을 지향한다. 롯데멤버스는 롯데의 이런 분위기를 구현하기 위해 일러스트레이터 오기사의 일러스트를 사용, 파스텔톤 롯데멤버스 월드를 만들어냈다. 사이트 전체 밑그림으로 사용된 일러스트와 실제 콘텐츠의 실사이미지가 결합된 롯데멤버스는 현실 속에서 빠져나와 잠시 동안의 여유와 감성을 충전할 수 있는 충전소 역할을 자처한다. 사용자와의 인터랙션을 위해 곳곳에 플래시를 사용해 동적인 이미지를 부여했고 참여형 웹진 형태로 다양한 서비스와 혜택 제공에 주력했다. 단순히 정보만 얻고 가는 것이 아니라 직접적인 참여를 통해 실질적인 혜택과 고객의 충성도를 높이고자 한 의도를 사이트 곳곳에서 엿볼 수 있다.
UX (User eXperience) UI 은유적 감성 라벨링
일러스트와 롯데멤버스의 아이덴티티를 보여줄 수 있는 라벨링이 관건이었다. 여행, 패션, 문화, 취미 콘텐츠를 직관적으로 알리면서 단순하지 않고 은유적으로 표현할 수 있는 감성 접근에 초점을 뒀다. 내비게이션은 1뎁스로 쉽게 구성했고, 길 잃을 염려나 학습의 필요성은 전혀 없도록 했다. 따라서 오히려 라벨링을 통해 콘텐츠를 이미지화할 필요가 있었다. 라벨링은 ‘ON THE ROAD’, ‘IN THE STREET’, ‘CULTURE NOTE’ 등 사용자의 기대와 경험의 여지를 두는 방향으로 구현됐다. 본 라벨링은 이번 리뉴얼 작업에 가장 고민이 많았던 부분으로 100개 이상의 후보 중에 선택된 이름들이다.
UX 함께 참여하는 동적인 콘텐츠
롯데멤버스 웹진은 오프라인 잡지 형태를 차용해 책장을 넘기듯 한 장 한 장 볼 수 있게 만들었다. 또한 페이지를 넘길 때 답답하지 않도록 플래시 애니메이션을 동적으로 사용했다. ‘CULTURE NOTE’ 콘텐츠는 공연 동영상을 제공해 실감 콘텐츠의 면목을 보여주며, 메인과 각 서브 첫 페이지를 플래시로 구현해 역동적이고 활동적인 이미지를 전달한다. 다양한 이벤트와 혜택도 눈에 띄는데, 퀴즈이벤트는 웹진을 읽어본 사람이라면 누구나 풀 수 있는 문제들로 구성했고 내월에 담청자를 뽑아 상품을 주는 식으로 진행된다. 롯데멤버스에서의 경험이 롯데 기업 이미지에 긍정적으로 미친다는 점에서 웹진의 역할이 기대된다.
Epilogue 그림의 손맛이 살아있는 롯데멤버스 웹진 일러스트를 사용해 웹 사이트를 만들어야 했기 때문에 디자인적으로 제한요소가 많은 프로젝트였다. 오기사라는 유명한 일러스트레이터가 참여한 프로젝트로, 최대한 그림의 손맛을 살리고자 했다. 그와 함께 롯데 고유의 이미지를 해치지 않는 방향에서 균형을 가져가는 가는 데 주력했다. 사실 3월 메인 페이지와 4월 메인 페이지는 색감부터 달랐는데, 그 때문에 지속적인 수정이 필요했고 좀 더 강한 색감과 이미지로 변화됐다. 이강P&C는 디자인회사지만 매체 성격도 지니고 있다. 회사 내에 기자가 있어 직접 취재와 촬영을 하기 때문에 이번 프로젝트의 경우 기획단계부터 사진촬영까지 모든 제작 과정에 참여할 수 있었다. 오프라인 매거진 형식으로 현장의 느낌을 그대로 웹진 안에 녹여내 사용자에게 생생한 정보를 접할 수 있도록 한 것이 다른 사이트와 가장 차별화된 점이 아닌가 한다.
Editor's Comment 월간 웹 기자의 눈으로 바라보는 롯데멤버스 웹진
더보기
이예근 기자
웹진은 말 그대로 웹에서 볼 수 있는 온라인 매거진이다. 오프라인 매거진과 다른 점이 있다면 시각과 청각을 모두 활용해 독자들에게 색다른 경험을 안겨줄 수 있다는 것이다. 하지만, 웹진은 기업 홍보물의 성격을 강하게 띠는 지라 정기 구독하거나 느긋하게 볼 수 없다는 단점도 있다. 롯데멤버스에서 발간하는 웹진 ‘LOTTE ON’은 웹진의 단점을 극복하려고 애쓴 흔적이 보인다. 일단 다양한 콘텐츠를 구성한 점에서 높은 점수를 주고 싶다. 각 메뉴에 어울리는 콘텐츠를 저마다 특색있게 채워넣어 읽는 재미, 보는 재미가 있다. 단순히 기업 정보만 쏟아내는 것이 아닌 기업 정보를 콘텐츠에 포함시킨 것이 인상적이다. 매월 바뀌는 디자인은 이 웹진을 정기구독하고 싶게 만든다.
심지영 기자
롯데가 백화점으로 유명한 브랜드라 웹진에 접속하기 전에 떠오르는 이미지가 있었다. 백화점 전단지에서 흔히 볼 수 있는 의류 브랜드 화보나 제품 이미지 화보 등이 배경일 것으로 예측했다. 그러나 귀여운 일러스트로 군더더기 없이 표현된 웹진 배경과 다섯 개로 나누어진 심플한 메뉴 구성이 웹진 내용에 대한 호기심을 불러일으켰다. 메뉴를 클릭해 들어가니 보기 좋은 크기의 화면과 읽기 적당한 글씨 크기, 이미지와 글이 적절한 비율로 구성돼 보는 데 부담이 없다. 어느 페이지에서든 원하는 페이지로, 혹은 원하는 다른 메뉴로 넘어갈 수 있도록 내비게이션이 편리하게 구축돼 있고, 그로 인해 사용자가 스스로의 위치를 파악하기 쉽다. 이는 일부만 보고 페이지를 나가기보다는 끝까지 콘텐츠를 살펴 보도록 유도하는 원동력이다. 콘텐츠 역시 가벼우면서도 실용적인 정보로 구성돼 유용하다.
박수연 기자
웹진 하면 떠오르는 모습과 콘텐츠가 있다. 일정한 틀과 기준, 그리고 이미 정해진 방향성이 있다. 그러나 롯데멤버스 웹진은 마치 트렌드지를 보고 있는 듯한 느낌이 든다. 여행, 패션, 문화 등의 콘텐츠에 정보 위주가 아닌 사례 위주의 정보를 담아서 실질적인 도움을 주고자 한 기획의도가 느껴진다. 그만큼 많은 정성과 시간이 들어갔음을 짐작할 수 있다. 파스텔 톤의 일러스트는 롯데 브랜드가 있는 풍경을 감성적으로 표현해 마치 해외의 한 도시 같은 느낌을 준다. 젊은 도시 여성 타깃을 위한 감성적인 사이트 콘셉트인 셈이다. 패션 정보와 이미지 메이킹 정보는 최근 이슈와 연계해 시의 적절한 필요를 채워주고, 밝고 따뜻한 롯데의 이미지를 적절히 믹스해 친근감이 느껴진다. 고객이 직접 참여한 체험을 수기로 한 콘텐츠와 다양한 이벤트는 웹진에 생동감을 더하며, 더 많은 참여와 소통을 유도한다. 롯데의 기존 이미지가 롯데멤버스 웹진으로 젊고 산뜻해진 느낌이다.
글 박수연 기자 pksyn@websmedia.co.kr 2010 월간 웹 7월호 Special Theme 디지털 스토리텔링 ; 다이내믹 브랜드 만들기 written by 배재형 한국야쿠르트 홍보팀 과장 edited by websmedia 저작권자 ⓒ 웹스미디어 컴퍼니 무단 전재-재배포 금지
스마트폰 열풍으로 들썩이는 요즘, 저마다 모바일 사업영역의 확대를 꾀하며 다양한 애플리케이션을 쏟아내고 있다. 그러나 아직은 이 거대한 움직임을 주도할만한 사용자 환경 가이드와 수익창출 모델을 제시한 사례는 많지 않다. 이런 가운데 금융업계의 트렌드세터 현대카드가 다시 한 번 선발대에 섰다. 지난 4월 선보인 ‘현대카드 M포인트몰’ 애플리케이션은 국내 모바일 쇼핑몰 보편화의 시작을 알리며, 단번에 쇼퍼(Shopper)들의 이목을 사로잡았다.
M포인트몰이란? 현대카드 M을 사용할 때 적립되는 M포인트와 현대카드로 결제할 수 있는 현대카드 회원 전용 쇼핑몰. 가전, 패션, 생활 카테고리의 상품을 다양한 가격대로 제공한다.
모바일 쇼핑몰의 현실화 국내 스마트폰 이용자의 급격한 증가와 함께 ‘모바일 혁명’이라고 불리는 스마트폰 애플리케이션(이하 앱)에 대한 수요도 나날이 높아지고 있다. 새로운 앱이 출시될 때마다 기업과 대행사의 관심이 집중됨은 물론, 이에 따른 이용자의 니즈 역시 빠르게 진화하는 중이다. 이미 현대카드는 명세서를 비롯해 슈퍼 콘서트, 슈퍼 매치의 시리즈 등 현대카드의 다양한 서비스를 특화된 아이폰 애플리케이션 형태로 제공하며, 그들만의 특화된 서비스를 고객에게 모바일을 통해서 경험할 수 있도록 했다. 그리고 현대카드는 ‘M포인트몰’ 앱을 통해 고객이 생활 속에서 보다 현실적으로 활용 가능한 모바일 앱을 제시했다. 이번 앱은 국내 모바일 쇼핑몰의 시작을 열고자 인터넷 사용이 쉬운 아이폰 이점에 M포인트 결제를 통한 상품구매, 모바일 기기에 맞춘 상품정보 검색구조 등의 조건을 완벽하게 충족시킨 애플리케이션이다.
온라인 프로세스의 모바일로의 전환 아이폰 사용이 활발한 해외 시장은 이미 대형 온라인 쇼핑몰에서 내놓은 아이폰 앱을 활용한 쇼핑이 활발하게 이뤄진다. 국내에도 이런 현상이 도래할 것으로 예상한 현대카드는 플립커뮤니케이션즈와 함께 국내 카드사 최초로 온라인 포인트몰을 기반으로 다양한 제품과 교환구매를 가능케 할 새로운 모바일 쇼핑환경, ‘M포인트몰 아이폰 애플리케이션’ 프로젝트를 진행했다. ‘현대카드 M포인트몰’ 아이폰 앱 구축에 있어 중요 포인트는 사용자가 웹 사이트와 모바일 이용 환경에 따른 혼란이 없도록 구현하는 것이었다. 고객에게 익숙한 온라인 M포인트몰의 구매-결제 프로세스를 모바일 애플리케이션에도 동일하게 적용해 이용의 편의성을 극대화하고 아이폰에서 구현할 수 있는 UI적인 흥미요소보다는 현대카드만의 비주얼 아이덴티티 및 커뮤니케이션 가이드를 최대한 적용해 앱 이용시 해당 메뉴에 대한 이해를 높여 보다 쉽고 빠르게 상품을 구매할 수 있도록 설계했다.
Expression
Contents 01 간결하고 명확한 쇼핑몰 모바일 애플리케이션 현대카드 웹 사이트에서 서비스하는 M포인트몰(http://mpointmall.hyundaicard.com)은 M포인트를 활용할 수 있는 전용 온라인 쇼핑공간으로 가전·디지털 제품과 의류·식품·생활용품 등 1,600여 가지 제품을 구비했다. 이를 아이폰 앱으로 서비스하려고 메뉴 간소화, 상품정보의 집약화를 통해 핵심 콘텐츠를 집중 부각시켜 단순하며 기능적인 프로세스를 구현했다. 인기상품과 신상품, 가격대별 카테고리를 둬 상품 접근성을 높였고, 포인트 보유내역, 장바구니, 주문·발송내역 조회 메뉴 등 쇼핑몰 핵심기능만으로 구성해 쇼핑이라는 이용 목적에 적합하게 제작했다.
Contents 02 사용자 배려한 상품정보 구성 M포인트 앱은 상품리스트 간격을 넓게 구성해 사용자가 상품정보를 한눈에 볼 수 있도록 가독성을 고려해 설계했다. 현대카드 아이덴티티를 적용한 서비스 아이콘을 하단 탭 바의 메뉴로 사용했으며, 직관적인 정보 접근성을 강화했다. 1위부터 50위까지의 종합 판매순위를 노출하는 상품목록은 M포인트몰의 웹 서비스와 같은 순위표시 블릿을 적용해 리스트 상의 제품 이미지 위로 해당 순위를 보여주고, 상세정보는 확대·축소할 수 있게 제작해 상품 이미지를 자세히 볼 수 있다. 또한, 간략한 정보를 하단에 노출해 고객으로 하여금 일차적으로 먼저 접하고, 자세한 정보는 상세정보보기를 통해 상품에 대한 정보를 제공하는 등 고객의 이해를 도왔다.
Contents 03 주문결제 및 구매내역, 온라인 프로세스 적용 결제정보에 대한 과정은 탭 형식으로 구성해 진행과정을 쉽게 인지할 수 있게 편의성을 고려했다. 결제 정보와 주문자, 배송지 정보를 한눈에 쉽게 볼 수 있도록 구성했다. 또한, 최근 6개월까지 이용한 구매·배송내역 조회가 가능한 구매내역 페이지는, 한 화면을 통해 자신이 구매한 상품정보와 송장번호·택배사 등의 실시간 배송확인을 비롯해 주문취소와 반품신청 또한 가능한데 이는 온라인 M포인트몰의 프로세스를 충실하게 모바일 환경에 적용한 사례다.
UX(User eXperience) UX 특화된 새로움 속에 익숙한 사용자 경험
온라인 M포인트몰 경험고객의 사용성과 편의성을 최우선으로 해 모바일 애플리케이션을 처음 접하는 이용자도 빨리 적응할 수 있도록 했다. 상품 위주의 시각적인 풀 스크린을 제공해 사용자 경험에 초점을 맞췄고, 사용자의 몰입도를 높이려고 텍스트 정보를 최소화한 UI를 제공했다. 또한, 상품목록, 상품 상세정보, 장바구니 담기, 구매와 결제까지의 과정은 슬라이딩과 터치 등의 기본 컨트롤을 적용했으며, 아이폰 환경에서의 사용자 경험을 고객이 최대한 느낄 수 있도록 했다.
아이폰 애플리케이션의 첫 모습이며 브랜드의 특징을 가장 직접적으로 노출할 수 있는 M포인트몰의 애플리케이션 아이콘도 함께 개발했다. 제작기간 동안 모바일 M포인트몰을 명확하게 전달하고자 현대카드 아이덴티티와 M포인트몰의 디자인 가이드를 활용한 여러 시안의 검토과정을 거쳤다. 최종 선택된 아이콘은 현대카드의 CI 컬러인 블랙 배경에 M포인트몰 로고가 적용된 것으로 가장 직관적인 가독성 결과로 해석할 수 있다. 이 아이콘은 앞으로 현대카드의 다른 앱에도 적용할 예정이다.
프로젝트명 M포인트몰 아이폰 애플리케이션 제작사 플립커뮤니케이션즈 개발사 휴젠텍 클라이언트 현대카드 오픈일 2010년 4월 26일
2010 월간 웹 6월호 Project : mobile 포인트 결제 가능한 모바일 쇼핑몰, 현대카드 M포인트몰 정리 이예근 기자 edited by websmedia 저작권자 ⓒ 웹스미디어 컴퍼니 무단 전재-재배포 금지
임상수 감독의 <하녀>는 리메이크 작품이라기보다는 감독과 시대 그리고 배우에 맞춰 새롭게 만든 다른 영화라고 봐도 될 만큼 독창적이며 인상적인 작품이다. 영화 <하녀>에서 배우들의 연기만큼 눈에 들어오는 것은 바로 영화의 주 배경이 되는 2층짜리 대저택. <하녀> 웹 사이트 또한 대저택의 공간감을 살려 또 다른 공간을 만들었다.
프로젝트명 영화 <하녀> 공식 웹 사이트 URL www.housemaid.co.kr 부문 엔터테인먼트 제작사 카인드인포 클라이언트 싸이더스에프앤에이치 오픈일 2010년 4월 10일
차별화 통한 관심 증대
영화 <하녀>는 성(性)과 계급 그리고 다양한 사회적 이슈가 대저택이라는 공간에서 부딪혀 파생한다. 영화에서 2층짜리 대저택은 대사 없는 또 하나의 배우인 동시에 영화를 지탱하는 지반이기도 하다. 영화 <하녀> 공식 웹 사이트는 대저택이라는 공간을 주요 이슈로 삼아 3D를 활용해 또 다른 <하녀>를 만들었다. 이번 프로젝트의 목적은 바로 표현 기법 차별화를 통한 사용자 관심에 있다. <하녀> 웹 사이트를 제작한 카인드인포 측은 “표현기법 차별화를 통해 영화에 대한 호기심을 유발하고 스토리로 관심을 끈 뒤 티켓 구매까지 이어질 수 있게 하는 것이 가장 큰 목표다”라고 말했다.
스토리텔링으로 접근 영화 웹 사이트가 일반 웹 사이트와 차별화 된 이유는 영화 자체 스토리가 많이 가미돼 있다는 점이다. <하녀> 웹 사이트도 사용자에게 스토리를 전달하는 스토리텔링 방식에 초점을 맞췄다. 스토리텔링 방식으로 웹 사이트를 구성하는 작업은 민감한 작업이다. 방향이 달라지면 영화에서 전달하고 싶은 것과는 전혀 다른 메시지를 전달해 혼란을 가져오기 때문이다. 그래서 <하녀>의 스토리텔링 작업도 많은 수정과 보완과정을 통해 3단계의 스토리 구조로 결정, 그 스토리는 사용자가 언제든지 볼 수 있도록 메뉴 우측에 배치해 스토리를 접할 수 있게 했다. 겉으로는 대저택 입체감을 이용해 곳곳에 캐릭터를 배치해 이야기와 심리묘사를 표현했다. 내용 구성에서는 ‘저택에서 과연 무슨 일이 일어나고 있는지’ 그 중심에 있는 ‘하녀는 어떤 이야기를 하고 싶은지’에 대해서 네티즌 스스로가 다양한 해석과 생각할 수 있게 구성했다. 가장 눈에 띄는 점은 영화 3D 사이트의 첫 시도임에도 3D를 이용한 다양한 표현방법의 영화 사이트가 많이 나올 수 있는 여지를 마련했을 정도로 완성도가 높다는 점이다.
Expression
Theme & Motive 스토리 중심인 동시에 공간적 중심인 ‘대저택’ 영화를 보면 극 중 캐릭터들의 성격이 매우 극단적인 것을 알 수 있다. 이는 시나리오에서도 마찬가진데, 극단적이라는 것은 그만큼 시나리오에 집중하고 캐릭터에 몰입할 수 있다는 것을 말한다. 몰입하면 자연스럽게 한 공간을 바라보게 되는데 그곳이 바로 하녀의 주무대인 ‘대저택’이다. ‘대저택’은 하녀의 모든 스토리를 말해 주는 곳이자 사이트의 공간적 주제이기도 한다.
Tone & Manner ‘고급스러움’, ‘세련됨’, 그리고 ‘긴장감’ 사이트 전체 톤앤매너는 세 가지 키워드(고급스러움, 세련됨, 긴장감)를 가지고 표현했다. ‘고급스러움’은 대저택과 소품 그리고 텍스처를 이용해 전달했으며, ‘세련됨’은 대저택에서 느껴지는 위엄 있는 날카로운 서체와 에로틱하면서 무거운 분위기를 전달할 수 있는 흑백 컬러톤을 사용했다. ‘긴장감’은 인물이 카메라에 비치는 구도와 캐릭터의 표정과 조명을 이용해 에로틱 서스펜스의 장르의 느낌을 전달했다.
Look & Feel 공간 이동과 배경을 통한 영화 정보 전달 <하녀> 웹 사이트는 대저택이라는 하나의 공간을 통해 영화 내용을 전달하는 것이 목표였다. 저택의 모델링을 위해 3D작업을 진행했고, 각 공간의 이동 방식은 건물의 회전과 확대로 처리했다. 일반적으로 3D를 접목한 웹 사이트는 복잡한 미로 속을 헤매는 느낌이 들지만 공간 이동방식을 최대한 단순히 처리해 방문자로 하여금 거부감 없이 사이트를 둘러보며, 영화정보를 얻을 수 있게 수위를 조절했다. 색상 부분도 검은색 배경에 하얀색, 금색, 회색만 적용했다.
Visual Effect 3D 툴을 이용해 공간 구성 작업
주로 영화 스틸과 포토샵을 사용해 이미지 보정작업을 진행했고, 3D 툴을 통해 기본 건물의 모델링 작업을 했다. 스릴러라는 장르적 느낌을 살려야 했기 때문에 많은 이미지의 리터칭 작업을 요했다. 특히, 공간적인 요소를 표현하는 데 영화 현장 스틸로는 한계가 있어 3D 모델링으로 새로운 공간 구성 작업을 진행했다.
Layout 정보 콘텐츠는 팝업으로 분리
정보전달의 주기능을 놓치지 않기 위해 이미지 영역과 콘텐츠 영역을 분리해 3D로 작업된 건물의 4면을 이용해 사이트 배경으로 사용할 이미지 영역으로 구성했고, 영화 정보의 콘텐츠 영역은 팝업으로 구분했다. 영화 사이트처럼 공간적 이미지 스틸을 많이 사용하다 보면 자칫 콘텐츠 정보가 이미지 영역에 묻혀 전달력이 다소 떨어질 수가 있기 때문이다.
UX(User eXperience) UI & UX 메뉴 배열로 사용성 증대
스페셜 시놉시스 메뉴를 우상단에 별도로 구성해 강화 콘텐츠의 접근을 용이하게 했고, 하단 메인 메뉴와 서브 메뉴를 하단 병렬로 놓아 사용성 증대를 높였다. 사이트 내에서 사용자가 마우스를 사용해 저택을 돌렸을 때 보이는 다양한 공간이 가장 큰 경험적 요소다. 카인드인포 관계자는 “사람은 늘 보던 공간을 새로운 디지털 매체를 통해 공간을 보게 되면 친숙함과 이질감을 동시에 갖게 된다”며 “그 이질감은 내비게이션 버튼을 눌렀을 때 자동으로 이동하는 모션을 통해 자연스럽게 해소되는 부분이기 때문에 그런 접근방법을 경험적 요소로 처리했다”고 밝혔다.
2010 월간 웹 6월호 Project report 스크린을 벗어난 또 다른 명품 공간 하녀 written by 월간 웹 이예근 기자 edited by websmedia 저작권자 ⓒ 웹스미디어 컴퍼니 무단 전재-재배포 금지
창조는 하나의 영감, 즉 ‘아이디어’에서 시작된다. 아이디어는 디자인에 있어 가장 핵심적인 부분이기도 하다. 하지만 아이디어를 구상하는 것은 디자이너에게는 일종의 ‘고문’과 같다. 아이디어는 번개처럼 스치고 지나는 순간에도 얻을 수도 있고, 밤새 머리를 쥐어짜도 얻기 힘들기 때문이다.
디자이너에게 ‘고문’과도 같은 아이디어에 대한 고민, 어떻게 하면 풀 수 있을까? 필자는 선배들의 디자인을 자주 접하고, 그 속에서 나만의 것을 찾는 훈련 외에는 다른 방법이 없다고 생각한다. 그래서 지금 이 순간에도 아이디어와 씨름하고 있을 많은 디자이너에게 도움이 될만한 사이트를 하나 소개하고자 한다.
‘The Cool Hunter’(www.thecoolhunter.co.au)는 ‘Design’, ‘Travel’, ‘Fashion’, ‘Art’ 등의 다양한 카테고리로 이뤄져 있으며, 수많은 디자이너의 작품을 감상할 수 있는 사이트다. 이 사이트는 아직 국내에는 많이 알려지지 않았지만, 필자가 접해본 디자인 관련 사이트 중 단연 최고라고 할 만하다.
필자는 이 사이트를 접하면서 ‘어떻게 저런 생각을 했을까?’라는 ‘감탄’과 동시에 ‘나도 저렇게 되고 싶다’는 ‘열정’을 가졌고, 지금도 많은 도움을 받고 있다. 누구나 뛰어난 디자이너가 될 수는 없지만, 뛰어난 디자이너가 정해진 것도 아니다. 오늘 소개한 The Cool Hunter 사이트는 뛰어난 디자이너를 꿈꾸는 모든 디자이너에게 반드시 도움을 줄거라 믿는다.
2010 월간 웹 6월호 site close up 디자인 아이디어 창고 The Cool Hunter written by 강경종 픽스다인 비주얼 이펙트 팀 주임 edited by websmedia 저작권자 ⓒ 웹스미디어 컴퍼니 무단 전재-재배포 금지
오프라인으로 계속 진행돼 온 J&B클럽 파티를 블로그나 미니홈피 위젯 서비스로 제공할 수 있게 됐다. 현장의 특별하고 즐거운 분위기를 전하고 좋은 소식을 함께 공유하기 위한 콘텐츠로, 온라인 유저들에게 J&B클럽 파티를 참여할 수 있도록 독려한다. 미러볼의 모티브를 디자인 콘셉트로 잡고 한눈에 클럽파티 분위기를 연상시킬 수 있도록 기획했다. 회전하는 미러볼을 클릭하면 파티사진을 확대해서 볼 수 있고, 이 사진들을 메인 비주얼로 사용해 실감 콘텐츠를 연출했다. 아래의 J&B병 실루엣에는 실시간 사진 감상 댓글이 올라오고 바로 글을 작성할 수 있다.
따뜻한 모래 바람이 밀려가고 오기를 반복하는 여유로운 사막. 그 위를 느릿느릿 걷는 낙타의 무심한 표정 뒤에 펼쳐진 황토 빛 물결. 잔잔히 흐르는 Nice System의 일렉트로닉 사운드가 빈티지한 감성을 자극한다. 이번 시즌 Thursday Island(이하 티아이) 콘셉트인 ‘Travel Fantasy’는 빈티지 여행과 이국적인 풍경에 어울리는 자유로운 감성을 표현했다.
모로코 남쪽, 붉은 마을로 불리 우는 마라케쉬(Marrakech)에서 티아이만의 매력을 찾아보자.
프로젝트명 T.I 2010 리뉴얼 URL www.thursdayisland.com 부문 브랜드 / 프로모션 제작사 뉴틸리티 클라이언트 GNCO 오픈일 2010년 2월 16일
빈티지와 여행, 이국적 풍경 속 자유, 낙천적인 삶의 조화
낯선 곳으로의 여행은 언제나 가슴을 뛰게 한다. 바삭 마른 모래 향기와 시각을 자극하는 이국적인 컬러, 어디선가 들려오는 휘파람소리까지, 총체적인 경험은 신선하다 못해 꿈을 꾸듯 허공을 부유한다.
2010 S/S 콜렉션은 빈티지 스타일과 자유로운 영혼을 꿈꾸는 브랜드 아이덴티티를 표현하기 위해 ‘여행’을 모티브로 삼았다.
이번 여행의 종착지였던 지중해 끝자락에 위치한 모로코는 회교적 신비에 가려져 있다는 점에서 프로젝트 콘셉트와도 잘 맞아떨어진다. 사람들은 모로코가 마치 신화와 현실 사이에 존재하는 요술 양탄자 같다고 말한다.
올해로 10주년을 맞는 티아이는 이번 시즌 리뉴얼 프로젝트를 통해 그들만의 특화 콘텐츠를 제작, 10주년 홍보의 장으로 이용하기 위한 만반의 준비를 갖췄다.
Expression Theme & Motive 빈티지한, 빈티즈 스타일
이번 웹 사이트의 메타포는 빈지티와 여행, 이국적 풍경, 자유, 낙천적인 삶이다. 도시의 숲을 벗어난 낯선 도시로의 여행, 그리고 자유로운 영혼이 꿈꾸는 브랜드라는 이미지에 맞게 ‘오래된’, ‘낡은’, ‘아날로그의’, ‘이국적인’ 느낌을 사이트에 녹여냈다.
사이트 전반에 걸쳐 표현한 종이 질감과 사막 느낌, 낡은 인쇄매체와 모노톤 컬러는 오래됨의 미학을 적절하게 보여준다.
여기에 BI와 스탬프를 활용한 폰트 이미지 매치는 빈티지 스타일에 세련된 감각을 강조한다.
Information ArchitectureIA 2010 S/S 콘셉트와 10주년 관련 콘텐츠의 만남
일관된 빈티지 스타일에 브랜드 철학과 콘셉트를 보여주는 정보구조를 이룬다. 사이트는 브랜드 설명과 시즌 콜렉션, 신상품 정보와 이미지, 카탈로그 및 광고, 패션 브랜드 사이트로서의 정보 전달과 10주년 관련 특수 콘텐츠로 구성돼 있다.
브랜드 시각화를 극대화하기 위해 메인 인트로에 시즌 콘셉트와 ‘여행’이라는 테마를 효과적으로 노출시켰다. 또 페이지 없이 자연스럽게 이동하는 플래시 구조를 통해 사이트 배경 음악 효과를 최대한 이끌어내고자 했다. 잔잔한 일렉트로닉 사운드가 여유롭고 자유로운 모로코의 풍경과 잘 어울린다.
Expression 빈티지 감성 리터칭
빈티지하면 구제 청바지가 떠오른다. 구제 청바지 하나를 만들기 위해 시도되는 여러 기법 중에는 낡은 느낌을 내기 위한 염색, 찢기, 구기기 등도 포함된다. 이번 티아이 사이트 또한 빈티지한 청바지를 만드는 과정과 진배없었다.
콘트라스트와 채도 조절 후 사진 리터칭을 했으며, 오래된 영문 활자가 가지는 느낌을 표현하기 위해 삽화 작업 과정을 거쳤다. 이와 함께 황량한 사막과 낡은 느낌을 부각시키기 위해 모노톤 컬러를 사용함으로써, 모로코 여행 콘셉트를 효과적으로 표현할 수 있었다.
UX (User Experience)UI 브랜드 경험을 위한 전주곡
사이트에 진입하면, 먼저 브랜드 콘셉트를 보여주는 이미지와 함께 배경 음악이 흐른다. 여유롭고 자유로운 사막 풍경과 어우러지는 음악은 브랜드 경험의 극대화를 꾀한다.
사이트의 내비게이션은 브랜드 시즌 콘셉트와 가치 철학으로 시작해 브랜드 경험, 문화 등의 총체적인 깊이를 더하는 방향으로 동선이 그려진다.
티아이는 일상을 탈피한 자유로움과 여행을 꿈꾸는 이들에게 새로운 브랜드 가치와 경험을 제공한다.
2010 월간 웹 5월호
Procect Best-이국적인 빈티지섬, Thursday Island written by 박수연 기자 edited by websmedia 저작권자 ⓒ 웹스미디어 컴퍼니 무단 전재-재배포 금지
월간 웹 [ w.e.b. ]/사이트클로즈업 에 해당하는 글50 개
태그 : 
